<template>
  <div class="colWrapper">
    <!--  tab  -->
    <div class="rowWrapper">
      <label for="refound">
        <input class="tabChoose"
               type="radio"
               id="refound"
               name="tab"
               value="退款"
               checked/>
        <div>
          <span>退款</span>
        </div>
      </label>
      <label for="deductions">
        <input class="tabChoose" type="radio" id="deductions" name="tab" value="退款"/>
        <div>
          <span>扣款</span>
        </div>
      </label>
    </div>
    <div class="colWrapper">
      <!--    订单信息  -->
      <div class="colWrapper orderInfo">
        <div class="orderTitle">
          <span>订单信息:</span>
        </div>
        <!--    信息内容    -->
        <div class="rowWrapper infoContent">
          <!--      左    -->
          <div class="colWrapper infoLeft">
            <div class="infoItem rowWrapper">
              <span>订单号:</span>
            </div>
            <div class="infoItem">
              <span>商品名称:</span>
            </div>
            <div class="infoItem">
              <span>商品编号:</span>
            </div>
            <div class="infoItem">
              <span>设备编号:</span>
            </div>
            <div class="infoItem">
              <span>设备名称:</span>
            </div>
            <div class="infoItem">
              <span>用户名称:</span>
            </div>
            <div class="infoItem">
              <span>创建时间:</span>
            </div>
          </div>
          <!--      右    -->
          <div class="colWrapper infoRight">
            <div class="infoItem">
              <span>订单金额:</span>
            </div>
          </div>
        </div>
      </div>
      <!--    提交部分  -->
      <div class="colWrapper submitContent">
        <div class="colWrapper formContent">

          <div class="rowWrapper item">
            <div class="itemLabel rowWrapper">
              <span>选择退款方式:</span>
            </div>
            <div>
              <Select v-model="refoundType" class="itemInput">
                <Option value="1">全部退款</Option>
                <Option value="2">部分退款</Option>
              </Select>
            </div>
          </div>

          <div class="rowWrapper item">
            <div class="itemLabel rowWrapper">
              <span>退款金额:</span>
            </div>
            <div class="refoundNum">
              <input placeholder="全额">
            </div>
          </div>

          <div class="rowWrapper item">
            <div class="itemLabel rowWrapper">
              <span>退款原因:</span>
            </div>
            <div>
              <textarea placeholder="请输入" class="itemInput"/>
            </div>
          </div>
        </div>
        <div class="submitButton">
          <Button type="error">确定</Button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import '../../style/main.css'

export default {
  data() {
    return {
      refoundType: '2'
    }
  }
}
</script>

<style scoped>
/* ---------------- tab ----------------*/
.tabChoose {
  display: none;
}

.tabChoose + div {
  width: 200px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(60, 60, 70, 1);
  transition: background-color .5s;
}

.tabChoose:checked + div {
  background-color: rgba(60, 60, 70, 1);
  color: #ffffff;
}

/* -------------------- 订单信息 --------------*/
.orderInfo {
  width: 556px;
  margin-top: 40px;
  padding: 20px;
  border-radius: 16px;
  background-color: rgba(229, 229, 229, 1);
}

.orderTitle {
  align-self: flex-start;
}

.orderTitle > span {
  font-size: 15px;
  font-weight: 700;
}

.infoContent {
  width: 100%;
  height: 100%;
}

.infoLeft {
  width: 50%;
}

.infoRight {
  width: 50%;
  height: 250px;
}

.infoItem {
  width: 180px;
  margin-top: 15px;
}

.infoItem > span {
  align-items: flex-start;
}

/* ---------- 提交部分 ------------------*/
.submitContent {
  width: 100%;
  align-items: flex-start;
}

.formContent {
  margin-left: 120px;
  align-items: flex-start;
}

.item {
  margin-top: 20px;
}

.itemLabel {
  width: 120px;
  justify-content: flex-end;
  padding-right: 20px;
}

.refoundNum > input {
  padding-left: 10px;

}

.itemInput {
  width: 180px;
}

textarea {
  padding-left: 10px;
}

.submitButton {
  align-self: center;
  margin-top: 20px;
}
</style>
